<template>
    <Transition>
    <div v-show="loginStoreState.isTryingLogin" class="loginView">
        <login v-show="userOperationStoreState.chooseOperate === 'login'"></login>

        <register v-show="userOperationStoreState.chooseOperate === 'register'"></register>

        <retrieve v-show="userOperationStoreState.chooseOperate === 'retrieve'"></retrieve>
    </div>
    </Transition>
</template>

<script setup>
import { ref } from 'vue'
import login from './login.vue'
import register from './register.vue'
import retrieve from './retrieve.vue'
import { loginState } from '@/stores/loginState.js'
import { userOperationState } from '@/stores/userOperationState.js'

const loginStoreState = loginState()
const userOperationStoreState = userOperationState()


</script>

<style scoped>
.loginView{
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: rgb(255, 255, 255, 0.35);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    transition: all 0.4s ease-in-out;
}
</style>